// Here are the general CSS functions defined
@use 'sass:meta';
@use 'sass:list';
@use 'config';

// getCssVarName(('button', 'text-color')) || getCssVarName('button', 'text-color') -> '--ml-button-text-color'
@function getCssVarName($args...) {
  $varName: config.$prefix-name + config.$namespace;

  @if list.length($args) == 1 and meta.type-of(list.nth($args, 1)) == 'list' {
    $args: list.nth($args, 1);
  }

  @each $item in $args {
    @if $item != '' {
      $varName: $varName + '-' + $item;
    }
  }
  @return $varName;
}

// getCssVar(('button', 'text-color')) -> var('--ml-button-text-color')
@function getCssVar($args...) {
  @return var(#{getCssVarName($args)});
}

// getCssVarWithDefault(('button', 'text-color'), red) => var(--ml-button-text-color, red)
@function getCssVarWithDefault($args, $default) {
  @return var(#{getCssVarName($args)}, #{$default});
}
